import { View, Image, Text, ScrollView, Button } from '@tarojs/components';
import Taro from '@tarojs/taro';
import React, { Component } from 'react';
import './index.less';
import actions from '../../actions/index';
import { connect } from 'react-redux';
import { store2Props } from '../../selectors';
import * as T from '../../types';
import { IPLAND_OSS_HOST } from '../../../constant';
import { OSS_BASE_PATH_PREFIX } from '../../constant';
import 'taro-ui/dist/style/components/modal.scss';

interface INaviProps {
  isOpened: boolean;
  onCancel: Function;
}
type IToolsBoxProps = T.IProps & INaviProps;

//@ts-ignore
@connect<Partial<IToolsBoxProps>, T.IToolsBoxState>(store2Props, actions)
export default class TaskModal extends Component<Partial<IToolsBoxProps>, any> {
  constructor(props) {
    super(props);
    this.state = {
    };
  }

  getTaskBox(listData) {
    let toolsView = [];
    listData.map((item, index) => {
      toolsView.push(
        <View
          className="row"
        >
          <View className="left">
            <Image
              className="bean"
              src={`${IPLAND_OSS_HOST}home/bean.png`}
              mode="heightFix" />
            <View className="context">
              <Text className="title">{item.taskName}({item.completedTimes}/{item.sumTimes})</Text>
              <Text className="prize">奖励：{item.rewardName}x{item.rewardValue}</Text>
            </View>
          </View>
          <View className="right">
            <Text className="complete"
              onClick={() => {
                this.goToTask(item.id)
              }}>去完成</Text>
          </View>
        </View>,
      );
    });
    return toolsView;
  }

  goToTask(taskId) {
    let {
      actions,
    } = this.props;
    let result = actions.action.getTaskDetail(taskId);
    result.then((res) => {
      let { gameTaskInfoVO, gameTaskReleaseVO } = res;
      // 0-浏览页面 1-分享好友 2-完成游戏 3-IPshop消费
      let { conditionsType } = gameTaskInfoVO;
      let { pagePath } = gameTaskReleaseVO;
      if (pagePath) {
        Taro.navigateTo({
          url:
            pagePath +
            '?taskId=' +
            taskId +
            '&taskConditionsType=' +
            conditionsType,
        });
      }
    });
  }

  render() {
    let {
      isOpened,
      main: { taskList },
    } = this.props;

    return (
      isOpened ? <View className="GetContainer">
        <View className="task">
          <View className="top">
            <Text className="name">做任务领取福利</Text>
            <Image
              className="close"
              src={`${IPLAND_OSS_HOST}home/close.png`}
              onClick={() =>
                this.props.onCancel()
              }>
            </Image>
          </View>
          {taskList.length > 0 ? <ScrollView className="toolsBox" scrollY>{this.getTaskBox(taskList)}</ScrollView>
            : <View className="emptyContent">
              <Image src={OSS_BASE_PATH_PREFIX + '/empty.png'} className="emptyIcon" />
              <View className="emptyExtraTitle">玩法升级中</View>
            </View>
          }
        </View>
      </View> : null
    );
  }
}

//create by moon https://github.com/creasy2010/moon
